<template>
  <el-dropdown @visible-change="onChange" @command="handleCommand">
    <div class="avatar-dropdown">
      <img class="user-avatar" :src="userInfo.userInfoData.avatarUrl || logoPng" alt=""/>
      <div class="user-name">{{ userInfo.userInfoData.name }}</div>
      <el-icon class="up-down">
        <component :is="visible ? 'ArrowUp' : 'ArrowDown'"/>
      </el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="logout">
          <svg-icon name="logout" size="16px"/>
          <span @click="logout">退出登陆</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue'
import {useRouter, useRoute} from 'vue-router'

import {ArrowUp, ArrowDown} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {LOGIN_URL} from '@/config/config'
import logoPngUrl from '@/assets/images/logo.png'

import userInfoStore from "@/store/modules/model/userInfoModel";
import userInfoModel from "@/store/modules/model/userInfoModel";


export default defineComponent({
  components: {
    ArrowUp,
    ArrowDown,
  },
  setup() {
    const visible = ref(false)

    function onChange(show: boolean) {
      visible.value = show
    }

    let userInfo = userInfoStore();
    let router = useRouter()
    let logout = () => {
      ElMessageBox.confirm(
          '您确认退出吗?',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        userInfo.logout()
        ElMessage.success('退出成功')
        router.push('/login')
      })
    }
    return {
      visible,
      onChange,
      userInfo,
      logout
    }
  },
})
</script>

<style scoped lang="scss">
.avatar-dropdown {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  height: 50px;
  padding: 0;

  .user-avatar {
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
  }

  .user-name {
    position: relative;
    margin: 0 6px;
    cursor: pointer;
  }
}
</style>
